<template>
  <section class="home">
    <div class="wrapper content">
      <app-swiper :banners="banners"></app-swiper>
      <app-tab-category :category="category"></app-tab-category>
      <template v-for="item in category" :key="item.id">
        <h2 class="section-title">{{item.title}}</h2>
        <app-grid-view :productDetails="item.productDetailss" :categoryUrl="item.url"></app-grid-view>
      </template>

    </div>
  </section>
</template>
<script lang="ts" setup>
import {storeToRefs} from 'pinia'
import {useHomeStore} from '~/store/home'
const homeStore = useHomeStore()
const {banners,category} = storeToRefs(homeStore)
</script>

<style scoped lang="less">
.section-title {
  padding-top: 60px;
  margin-bottom: 24px;
  font-size: 24px;
  font-weight: 500;
}
</style>
